<template>
  <div class="common-charts-container">
    <div class="common-charts-item" id="c1"></div>
    <div class="common-charts-item" id="c2"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

/*
 * 需要component修饰符,下面的es6语法才能生效
 * */
@Component
export default class Bars extends Vue {
  // 定义了这个私有变量
  private renderParams: any = {};
  mounted() {
    let data = this.getData();
  }
  // methods方法
  private async getData() {
    let res: any = await this.$https.get("/mock/lines");
    console.log("---", res);
    if (res.data.code === 0) {
      this.renderBarChart(res.data.data);
      return res.data.data;
    }
  }
  private renderBarChart(data: any) {
    let chart: any = new this.G2.Chart({
      container: "c1",
      forceFit: true,
      height: 360
    });
    chart.source(data);
    chart.scale("Integer", {
      tickInterval: 100
    });
    chart.interval().position("Date*Integer");
    chart.render();
  }
}
</script>

<style scoped lang="scss"></style>
